<template>
  <view :style="{ backgroundColor: bgColor }" class="calender container h-100">
    <view class="calender-tools flex-between-center">
      <view class="fs-40 calender-title">已背单词</view>
      <view class="btns r-25">
        <nut-button :color="activeBar === 'calender' ? '#52b6df' : 'transparent'" class="flex-center" size="small"
          @click="go('calender')">
          <template #icon>
            <IconFont font-class-name="iconfont" class-prefix="icon" name="fi-rr-calendar" size="18"
              :style="{ color: activeBar === 'calender' ? '#fff' : '#64748B' }" />
          </template>
        </nut-button>
        <nut-button :color="activeBar === 'today' ? '#52b6df' : 'transparent'" class="flex-center" size="small"
          @click="go('today')">
          <template #icon>
            <IconFont font-class-name="iconfont" class-prefix="icon" name="fi-rr-list"
              :style="{ color: activeBar === 'today' ? '#fff' : '#64748B' }" size="16" />
          </template>
        </nut-button>
      </view>
    </view>
    <view v-if="activeBar === 'calender'" class="calender-content animate__animated animate__faster animate__slideInLeft">
      <Calender></Calender>
    </view>
    <view v-if="activeBar === 'calender'" class="calender-word p-48 animate__animated animate__fadeInUp">
      <WordList></WordList>
    </view>
    <view v-if="activeBar === 'today'" class="calender-word animate__animated animate__fadeInUp">
      <TodayWordList></TodayWordList>
    </view>
  </view>
</template>
<script setup name="Calendar">
import './index.scss';
definePageConfig({
  navigationBarTitleText: '日历',
  navigationBarBackgroundColor: '#f3f5f8',
})

import { IconFont } from '@nutui/icons-vue-taro';
import Calender from '../../components/Calender/index'
import WordList from './WordList'
import TodayWordList from './TodayWordList'
import Taro from '@tarojs/taro'
import { ref, getCurrentInstance, computed, watchEffect } from 'vue'

const { proxy } = getCurrentInstance()

const activeBar = ref('today')

const bgColor = computed(() => {
  if (activeBar.value === 'calender') {
    return '#f3f5f8'
  } else {
    return '#ffffff'
  }
})

watchEffect(() => {
  if (activeBar.value === 'calender') {
    Taro.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#f3f5f8',
      animation: {
        duration: 300,
        timingFunc: 'easeIn'
      }
    })
  } else {
    Taro.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#ffffff',
      animation: {
        duration: 300,
        timingFunc: 'easeIn'
      }
    })
  }
})

// 单机切换月，当天
function go(type) {
  activeBar.value = type
}
</script>
<style lang="scss">
.calender-title {
  color: $color-base;
}
</style>
